
<template>
	<view class="artist_xiangqing" >
	    <view id="artist_header"  v-for="(item, index) in imageList"
             :key="index">
	        <image mode="aspectFill" :src="item.src"></image>
	        <view id="content">
	            <image id="touxiang" src='http://rco8i11co.hn-bkt.clouddn.com/1.jpg' alt="" />
	            <view class="miaoshu">
	                <text>{{item.name}}</text>
	                <text>他好像对宇宙没什么话讲</text>
	                <view id="fans">
	                <text>{{item.fans}} <text id="fans_fan">粉丝</text></text>
	    <view>           <!-- <uni-icons type="heart" color="#000" ></uni-icons> -->{{item.fans}} <text id="icon">获赞</text></view>
	                </view>    
	            </view>
	            <button id="btn">+关注</button>
	        </view>
	        <view id="person">
				
	        <text>个人介绍</text>
	        <text id="jieshao">我就是我，颜色不一样的烟火！</text>
	    </view>
	    <view>
	                   <view class="inv-h-w">
	                           <view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">画廊</view>
	                           <view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">藏品馆</view>
	                   </view>
	                   <view class="hua" v-show="Inv == 0">
	                       <text>全部</text>
						   <view class="all">
	                         <view id="all_content">
								<image mode="widthFix"  :src="item.src"></image>
							<!-- 	<uni-icons type="heart" color="#000"></uni-icons>				 -->
							<text>《动物世界》</text>
							 </view>
							 
	                       </view>
	                   </view>
	                   <view class="cangpin" v-show="Inv == 1">
	                         <text>全部</text>
							 <text>可售</text>
							 <text>私藏</text>
						   <view class="all">
	                       	
	                       		 
	                       </view>
	                   </view>
	           </view>
	    <view id="footer">
	     
	    </view>
	    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				   Inv:0,
				   imageList:[
				   	{
				   	id:1,
				   	name:'呵呵',
				   	fans:100,
				   	src:'http://rco8i11co.hn-bkt.clouddn.com/1.jpg'	,
				   	text:'动物世界'
				   	},
				   	// {
				   	// id:2,
				   	// name:'呵呵',
				   	// fans:100,
				   	// src:'http://rco8i11co.hn-bkt.clouddn.com/2.jpg'	,
				   	// text:'动物世界2'
				   	// },
				   	// {
				   	// id:3,
				   	// name:'呵呵',
				   	// fans:100,
				   	// src:'http://rco8i11co.hn-bkt.clouddn.com/3.jpg'	,
				   	// text:'动物世界2'
				   	// },
				   	// {
				   	// id:4,
				   	// name:'呵呵',
				   	// fans:100,
				    //    src:'http://rco8i11co.hn-bkt.clouddn.com/4.jpg'	,
				   	// text:'动物世界2'
				   	// },
				   ]
			}
		},
		methods: {
			 changeTab(Inv){
			      that.navIdx = Inv;
			                                 
		 },
		}
	}
</script>

<style>
	 .inv-h-w{background-color: #FFFFFF;height: 100upx;display: flex;}       
     .inv-h{font-size: 30upx;flex: 1;text-align: center;color: #C9C9C9;height: 100upx;line-height: 100upx;}
     .inv-h-se{color: #000;border-bottom: 4upx solid #CD5C5C;}
     page{background-color: #F2F2F2;}
.artist_xiangqing{
    width: 750rpx;
    /* background-color: pink; */
}
#artist_header image{
    width: 750rpx;
    height: 300rpx;
}
#content {
    width: 750rpx;
    height: 300rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
   /* background-color: yellow; */
}
#content #touxiang{
    width: 120rpx;
    height: 120rpx;
    margin: auto;
    margin-top: -40px;
    border-radius: 30px;
}
.miaoshu{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin:auto;
    width: 500rpx;
   /* background-color: blueviolet; */
}
#fans{
    display: flex;
    flex-direction: row;
    width: 400rpx;
	margin-top: 10px;
   /* background-color:gray; */
    justify-content: space-between;
}
#icon{

	color: #C9C9C9;
	/* margin-top: 5px; */
}
uni-button{
    display: flex;
    justify-content: center;
    margin-bottom:5px;
    width: 70px;
    height: 35px;
    line-height: 35px;
    color: #fff;
    font-size: small;
   background-color: indianred;
    border-radius: 12px;
}
#person{
    width: 720rpx;
    height: 400rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin:auto;
    box-sizing: border-box;
    border: 1px #D8D8D8 solid;
}
 #jieshao{
    display: flex;
    justify-self: start;
    margin:5px;
}
#fans_fan{
	color: #C9C9C9;
}
.all{
	display: flex;
    flex-direction: row;
	margin:10px auto;
    width: 730rpx;
    height: 400rpx;
    box-sizing: border-box;
 /*   border: 1px red solid; */
}
.hua text{
    margin-left: 10px;
	font-size: 12px;
	color: #CD5C5C;
}
#all_content{
   
	width: 700rpx;
	height: 250rpx;
	background-color: #C9C9C9
}

.cangpin text{
	margin:10px 0 10px 20px;
	font-size: 12px;
	color: #CD5C5C;
}
</style>
